<ng-template #checkContent>
  <ng-content></ng-content>
</ng-template>

<div class='lv-checkbase-container' [class.lv-checkbase-container-hidden]="lvViewType!=='default'">
  <ng-container *ngIf="type === 'checkbox'">
    <input #input class='lv-checkbase-input' [type]='type' (click)='$event.stopPropagation()' [ngModel]='checked' [disabled]='disabled'
    />
    <span class='lv-checkbox-inner'> </span>
    <span class='lv-checkbox-inner-selected'>
      <i *ngIf="checked" lv-icon="lv-icon-checked" class="lv-icon-checked" [@checkboxInner]></i>
    </span>
  </ng-container>
  <ng-container *ngIf="type === 'radio'">
    <input #input class='lv-checkbase-input' [type]='type' (click)='$event.stopPropagation()' [ngModel]='checked' [disabled]='disabled'
      [attr.name]="groupName !== '' ? groupName : null" />
    <span class='lv-radio-inner'></span>
    <span class='lv-radio-inner-selected'></span>
  </ng-container>
</div>

<ng-container [ngSwitch]="true">
  <ng-container *ngSwitchCase="lvViewType === 'custom'" [ngTemplateOutlet]="checkContent"></ng-container>
  <ng-container *ngSwitchCase="lvViewType === 'button'" [ngTemplateOutlet]="checkContent">
    <button lv-button [lvSize]="lvButtonSize" [disabled]="disabled" (mousedown)="$event.preventDefault()">
      <ng-container [ngTemplateOutlet]="checkContent"></ng-container>
    </button>
  </ng-container>
  <ng-container *ngSwitchCase="lvViewType === 'link'" [ngTemplateOutlet]="checkContent">
    <button lv-button [lvSize]="lvButtonSize" [disabled]="disabled" [lvType]="checked ? 'primary' : 'link'" (mousedown)="$event.preventDefault()">
      <ng-container [ngTemplateOutlet]="checkContent"></ng-container>
    </button>
  </ng-container>
  <ng-container *ngSwitchDefault>
    <div class='lv-checkbase-label' #baseContentElement (cdkObserveContent)="updateContent()">
      <ng-container [ngTemplateOutlet]="checkContent"></ng-container>
    </div>
  </ng-container>
</ng-container>
